<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <script type="text/javascript">
        <%--	立即执行函数--%>
        $(function () {
            //创建点击事件绑定，打开添加操作的模态窗口
            $("#addBtn").click(function () {
                //引入bootstrap的时间插件
                $(".time").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                /*
                    在打开模态窗口之前，需要加载后台数据,将用户信息显示出来
                */
                $.ajax({
                    url: "workbench/activity/getUserList.do",
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        let html = "<option></option>";

                        //遍历出来的每个n，就是user对象
                        $.each(data, function (i, n) {
                            html += "<option value='" + n.id + "'>" + n.name + "</option>";
                            console.log(html);
                        })

                        //为下拉列表框添加数据
                        $("#create-owner").html(html);

                        //取得当前用户的id
                        //在js中使用el表达式，el表达式一定要套用在字符串
                        let id = "${user.id}";
                        $("#create-owner").val(id);

                        /*
                            操作模态窗口的方式，element.modal("show"/"hide");show展示，hide隐藏
                         */
                        $("#createActivityModal").modal("show");

                    }
                })
            })

            //保存按钮的点击事件绑定
            $("#saveBtn").click(function () {
                //保存时发送ajax异步请求
                $.ajax({
                    url: "workbench/activity/save.do",
                    data: {
                        "owner": $.trim($("#create-owner").val()),
                        "name": $.trim($("#create-name").val()),
                        "startDate": $.trim($("#create-startDate").val()),
                        "endDate": $.trim($("#create-endDate").val()),
                        "cost": $.trim($("#create-cost").val()),
                        "description": $.trim($("#create-description").val())
                    },
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            /*
                             添加成功后，刷新市场活动信息列表(局部刷新)
                              添加成功之后维持设置好的每页展现的记录数
                            * */
                            pageList(1,$("#activityPage").bs_pagination("getOption","rowsPerPage"));

                            //清空模态窗口的数据
                            $("#activityAddForm")[0].reset();

                            //关闭添加窗口的模态窗口
                            $("#createActivityModal").modal("hide");

                        }else{
                            alert("添加市场活动失败");
                        }
                    }
                })
            })

            //页面加载完毕之后触发方法，默认展开列表的第一页,每页显示两天记录
            pageList(1, 2);

            //为查询按钮添加添加一个入口方式，pageList
            $("#searchBtn").click(function () {
                //点击查询按钮的时候，我们应该将搜索框中的信息保存起来，保存到隐藏域中
                $("#hidden-name").val($.trim($("#search-name").val()))
                $("#hidden-owner").val($.trim($("#search-owner").val()))
                $("#hidden-startDate").val($.trim($("#search-startDate").val()))
                $("#hidden-endDate").val($.trim($("#search-startDate").val()))
                pageList(1, 2)
            })

            //为复选款绑定事件
            $("#qx").click(function () {
                //获取activityBody元素下的所有input元素，prop修改元素内容为checked
                $("#activityBody :input").prop("checked", this.checked);
            })

            //绑定动态生成的元素，代理绑定
            $("#activityBody").on("click", $("input[name=xz]"), function () {
                $("#qx").prop("checked", $("input[name=xz]").length == $("input[name=xz]:checked").length);
            })


            //为删除按钮绑定事件
            $("#deleteBtn").click(function () {
                if (confirm("确定删除所选的内容嘛？")) {
                    //找到复选款中所有勾上的复选框
                    let $xz = $("input[name=xz]:checked");
                    if ($xz.length == 0) {
                        alert("请选择需要删除的记录");
                    } else {
                        let param = "";
                        //拼接参数
                        for (let i = 0; i < $xz.length; i++) {
                            //将$xz中每个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录id
                            param += "id=" + $($xz[i]).val();
                            if (i < $xz.length - 1) {
                                param += "&";
                            }
                        }
                        $.ajax({
                            url: "workbench/activity/delete.do",
                            data: param,//键值对的形式
                            type: "post",
                            dataType: "json",
                            success: function (data) {
                                if (data.success) {
                                    //请求局部刷新列表
                                    //维持设置好的每页展现的记录数
                                    pageList(1, $("#activityPage").bs_pagination("getOption","rowsPerPage"));
                                } else {
                                    alert("删除市场活动失败")
                                }
                            }
                        });
                    }
                }
            })

            //为修改按钮绑定事件
            $("#editBtn").click(function () {
                //引入bootstrap的时间插件
                $(".time").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                /*
                    在打开修改模态窗口之前，先要将数据铺上，第一个铺用户列表，第二个铺活动市场信息
                 */
                //获取复选框
                let $xz = $("input[name=xz]:checked");
                if ($xz.length === 0) {
                    alert("请选择需要修改的市场活动！");
                } else if ($xz.length > 1) {
                    alert("请选择一个进行修改")
                } else {
                    $.ajax({
                        url: "workbench/activity/getUserListAndActivityList.do",
                        data: {"id": $xz.val()},
                        dataType: "json",
                        type: "get",
                        success: function (data) {

                            let html = "<option></option>";

                            //遍历出来的每个n，就是user对象
                            $.each(data.dataList, function (i, n) {
                                html += "<option value='" + n.id + "'>" + n.name + "</option>";
                            });

                            //为下拉列表框添加数据
                            $("#edit-owner").html(html);

                            /*
                                  第二个返回活动信息列表，将其在前段页面上显示
                             */
                            //将修改模态窗口打开
                            $("#editActivityModal").modal("show");

                            //修改下拉列表框为text文本框
                            $("#edit-owner").attr("type","text");
                            //铺上姓名
                            $("#edit-owner").val(data.activity.owner);

                            //铺上活动id
                            $("#edit-id").val(data.activity.id);//存放在hidden隐藏框中
                            //铺上活动名
                            $("#edit-name").val(data.activity.name);
                            //铺上活动开始
                            $("#edit-startDate").val(data.activity.startDate);
                            //铺上活动结束日期
                            $("#edit-endDate").val(data.activity.endDate);
                            //铺上费用
                            $("#edit-cost").val(data.activity.cost);
                            //铺上描述
                            $("#edit-description").val(data.activity.description);
                        }
                    })
                }
            });

            //绑定更新按钮事件
            $("#updateBtn").click(function() {
                $.ajax({
                    url:"workbench/activity/update.do",
                    data:{
                        "id":$("#edit-id").val(),
                        "name":$("#edit-name").val(),
                        "owner":$("#edit-owner").val(),
                        "startDate":$("#edit-startDate").val(),
                        "endDate":$("#edit-endDate").val(),
                        "cost":$("#edit-cost").val(),
                        "description":$("#edit-description").val()
                    },
                    type:"post",
                    dataType:"json",
                    success:function(data) {
                        if (data.success){
                            alert("更新成功");
                            //更新成功刷新活动列表，且页数停留在当前页，维持已经设置好的每页展现的记录数
                            pageList($("#activityPage").bs_pagination("getOption","currentPage"),$("#activityPage").bs_pagination("getOption","rowsPerPage"));
                            //关闭市场活动模态
                            $("#editActivityModal").modal("hide");
                        }else{
                            alert("更新失败");
                        }
                    }
                })
            })
        });

        function pageList(pageNo, pageSize) {
            //每次加载列表的时候将复选框的勾去掉
            $("#qx").prop("checked", false);

            //在查询前将隐藏域中取出来，重新赋值到搜索中
            $("#search-name").val($.trim($("#hidden-name").val()))
            $("#search-owner").val($.trim($("#hidden-owner").val()))
            $("#search-startDate").val($.trim($("#hidden-startDate").val()))
            $("#search-startDate").val($.trim($("#hidden-endDate").val()))
            $.ajax({
                url: "workbench/activity/pageList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "name": $.trim($("#search-name").val()),
                    "owner": $.trim($("#search-owner").val()),
                    "startDate": $.trim($("#search-startDate").val()),
                    "endDate": $.trim($("#search-endDate").val())
                },
                type: "get",
                dataType: "json",
                //data为后端返回数据，为json对象，或json对象
                //查询出来的总记录数:"total"总记录数,"dataList"市场活动列表
                //{"total":100,"dataList":[{市场活动1},{2}..]}
                success: function (data) {
                    let html = "";

                    //遍历dataList市场活动列表，n表示遍历一次就获取一个市场活动；然后将他在页面上显示
                    $.each(data.dataList, function (i, n) {
                        html += '<tr class="active">';
                        html += '<td><input type="checkbox" name="xz" value=' + n.id + '></td>';
                        html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">' + n.name + '</a></td>';
                        html += '<td>' + n.owner + '</td>';
                        html += '<td>' + n.startDate + '</td>';
                        html += '<td>' + n.endDate + '</td>';
                        html += '</tr>';
                    })

                    //向列表添加数据
                    $("#activityBody").html(html);

                    //计算总页数
                    let totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;
                    //数据处理完毕后，结合分页查询对前端展现分页信息
                    $("#activityPage").bs_pagination({
                        currentPage: pageNo, //当前页数
                        rowsPage: pageSize,	//分页显示的记录数
                        maxRowsPerPage: 20,	//每页最多显示的页数
                        totalPages: totalPages,	//总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 3,//显示卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        onChangePage: function (event, data) {
                            pageList(data.currentPage, data.rowsPerPage);
                        }
                    });
                }

            });
        }

    </script>
</head>
<body>

<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-owner"/>
<input type="hidden" id="hidden-startDate"/>
<input type="hidden" id="hidden-endDate"/>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="activityAddForm">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-owner">

                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-startDate" readonly>
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-endDate" readonly>
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">

                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-owner">
                                <%--<option>zhangsan</option>
                                <option>lisi</option>
                                <option>wangwu</option>--%>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="edit-startDate">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="edit-endDate">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <!--

                                关于文本域，textarea
                                    1.一定是要以标签对的形式来呈现，正常状态下标签对要紧紧的挨着
                                    2.textarea虽然是以标签对的形式存在，但是它也属于表单元素范畴
                                        我们所有的对于textarea的取值和赋值操作，应该统一使用val()方法（而不是html()方法）
                            -->
                            <textarea class="form-control" rows="3" id="edit-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>


<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="search-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="search-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control time" type="text" id="search-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control time" type="text" id="search-endDate"/>
                    </div>
                </div>

                <button type="button" id="searchBtn" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span>
                    创建
                </button>
                <button type="button" class="btn btn-default" id="editBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>

        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="activityBody">
                <%--						<tr class="active">--%>
                <%--							<td><input type="checkbox" /></td>--%>
                <%--							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>--%>
                <%--                            <td>zhangsan</td>--%>
                <%--							<td>2020-10-10</td>--%>
                <%--							<td>2020-10-20</td>--%>
                <%--						</tr>--%>

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div id="activityPage"></div>

        </div>

    </div>

</div>
</body>
</html>